<template>
    <div class="examine" v-show="!isShow"  v-loading="loading">
        <div class="examine-top">
            <div>
                <div>当前审批中</div>
                <p>{{ currApproveCount }}</p>
            </div>
            <div>
                <div>本月审批通过</div>
                <p>{{ approveCount }}</p>
            </div>
            <div>
                <div>本月审批驳回</div>
                <p>{{ rejectionCount }}</p>
            </div>
        </div>
        <div class="examine-table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" sortable label="序号" width="80" />
                <el-table-column prop="processName" sortable label="审批类型" width="180" />
                <el-table-column prop="username" sortable label="申请人" />
                <el-table-column prop="procCurrNodeUserName" sortable label="当前审批人" />
                <el-table-column prop="procApplyTime" sortable label="审批发起时间" />
                <el-table-column prop="processState" sortable label="审批状态">
                    <template #default="{ row }">
                        <span v-if="row.processState == 0">已提交</span>
                        <span v-if="row.processState == 1">审批中</span>
                        <span v-if="row.processState == 2">审批通过</span>
                        <span v-if="row.processState == 3">审批不通过</span>
                        <span v-if="row.processState == 4">撤销</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" text @click="Check(row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />
        </div>
    </div>

    <RouterView  v-show="isShow"/>
</template>

<script setup>
import { getApprovalList,getApprovalDetail } from "@/api/examineApi/examineApi.js"
import { ref, watch } from 'vue';
import { useRoute, useRouter} from 'vue-router';
let router = useRouter()
let tableData = ref([])
let total = ref(0)
let page = ref(1)
let isShow = ref(false)
let currApproveCount = ref(0)
let approveCount = ref(0)
let rejectionCount = ref(0)
let loading = ref(false)

let route = useRoute()
console.log(route);
let go = ()=>{
    if(route.fullPath!=="/examine"){
        isShow.value = true
    }else{
        isShow.value = false
    }
}
// 监听路由变化
watch(
    () => route.fullPath,
    () => {
        go()
    }
)
go()

let examineGet = () => {
    loading.value = true
    getApprovalList(page.value).then((result) => {
        console.log(result);
        currApproveCount.value = result.data.currApproveCount
        approveCount.value = result.data.approveCount
        rejectionCount.value = result.data.rejectionCount
        total.value = result.data.total
        tableData.value = result.data.rows
        loading.value=  false
    })
}
examineGet()
let handleCurrentChange = (val) => {
    page.value = val
    examineGet()
};

let Check = (row) =>{
    router.push({
        path:"/check",
        query:{
            id:row.processId
        }
    })

}

</script>

<style scoped lang="scss">
.examine-top {
    display: flex;
    background-color: #fff;
    padding: 30px;

    div {
        width: 120px;
        text-align: center;
    }
}

.examine-table {
    margin-top: 10px;
    background-color: #fff;
    padding: 30px;
}
</style>